<template>
    <MyCard>
        <div class="title">
            <div></div>
            {{ title }}
        </div>
        <el-card shadow='never'
            style='border: none; border-top:2px solid #f3efef; border-bottom:2px solid #f3efef;border-radius: 0;'>
            <div style="margin-bottom: 20px;"><span style="color: #333333; font-size: 16px;">服务项目信息</span></div>
            <el-form>
                <el-form-item>
                    <el-space>
                        <span>项目名称</span>
                        <el-input type="text" style="width: 200px;height: 40px;margin-right: 100px;"
                            v-model="formItem.name" placeholder="请输入"></el-input>
                        <span>服务次数</span>
                        <el-input type="text" style="width: 200px;height: 40px;" placeholder="请输入"
                            v-model="formItem.count"></el-input>
                        <el-radio :value="3">不限次数</el-radio>
                    </el-space>
                </el-form-item>
                <el-form-item>
                    <el-space>
                        <span>项目类型</span>
                        <el-select type="text" style="width: 200px;height: 40px;margin-right: 100px;"
                            v-model="formItem.type">
                            <el-option label="全部" value="全部" />
                            <el-option label="免费项目" value="免费项目" />
                            <el-option label="付费项目" value="付费项目" />
                        </el-select>
                        <span>项目原价</span><el-input type="text" style="width: 200px;height: 40px;" placeholder="请输入"
                            v-model="formItem.price"></el-input>
                    </el-space>
                </el-form-item>
                <el-form-item>
                    <div>
                        <el-space style="display: flex;align-items: start;">
                            <span>服务介绍</span>
                            <el-input type="textarea" style="width: 581px;" :rows="5"
                                v-model="formItem.intro"></el-input></el-space>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
        <el-space style="margin-top: 30px;">
            <el-button type="primary" @click="onSubmitBtn()">保存</el-button>
            <router-link to="/data/serviceItem/list"><el-button>返回</el-button></router-link>
        </el-space>
    </MyCard>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { addServiceItemsApi, getServiceItemsApi, updateServiceItemsApi } from '../../../api/serviceItems';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import MyCard from '../../../components/MyCard.vue'

const router = useRouter();
const route = useRoute();
const queryId = route.query._id
const formItem = ref({});
onMounted(() => {
    if (queryId) {
        getServiceItems(queryId);
        title.value = '编辑服务项目'
    }
});

const title = ref('新增服务项目');
function getServiceItems(_id) {
    getServiceItemsApi({ _id }).then(res => {
        if (res.code == 200) {
            console.log(res);
            formItem.value = res.data;
        }
    })
}

function onSubmitBtn() {
    if (formItem.value._id) {
        updateServiceItems();
    } else {
        addServiceItems();
    }
    router.replace('/data/serviceProject/manage');
}
//添加
function addServiceItems() {
    addServiceItemsApi({ ...formItem.value }).then(res => {
        if (res.code == 200) {
            ElMessage.success('添加成功!');
        } else {
            ElMessage.error(res.message);
        }
    })
}


//修改
function updateServiceItems() {
    updateServiceItemsApi({ ...formItem.value }).then(res => {
        if (res.code == 200) {
            ElMessage.success('修改成功!');
        } else {
            ElMessage.error(res.message);
        }
    })
}
</script>

<style lang="scss" scoped>
.title {
    display: flex;
    line-height: 1;
    font-size: 18px;
    color: rgba(51, 51, 51, 0.898039215686275);
    margin-bottom: 20px;

    div {
        margin-top: -1px;
        width: 6px;
        height: 23px;
        background-color: rgba(41, 132, 248, 1);
        margin-right: 10px;
        border-radius: 60px;
    }
}
</style>